<template>
  <div>
      <div class="contain">
        <div id="chart2" style="width:48%;height:356px"></div>
        <div id="chart1" style="width:48%;height:356px"></div>
      </div>
      
      <div id="chart3" style="width:100%;height:366px"></div>
  </div>
</template>

<script>
// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import * as echarts from 'echarts/core';
// 引入柱状图图表，图表后缀都为 Chart
import { BarChart } from 'echarts/charts';
// 引入提示框，标题，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent
} from 'echarts/components';
// 标签自动布局、全局过渡动画等特性
import { LabelLayout, UniversalTransition } from 'echarts/features';
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import { CanvasRenderer } from 'echarts/renderers';
import { throttle } from 'echarts';
import Axios from "axios";

export default {

  data(){
//recordNum：用于存储从后端接口获取的报警管理数据中的已处理、未处理、已忽略和报警总数。
// dataNum：用于存储从后端接口获取的设备数据中的总设备数、当日上线数和当日下线数。
// countList：用于存储从后端接口获取的每月在线量、平均轴速和每月报警数数据。
// countRecord：用于存储从后端接口获取的报警管理数据中每个月的报警数。
    return {
      recordNum:[],
      dataNum:[],
      countList:[],
      countRecord:[]
    }

  },

  created(){
    echarts.use([
    TitleComponent,
    TooltipComponent,
    GridComponent,
    DatasetComponent,
    TransformComponent,
    BarChart,
    LabelLayout,
    UniversalTransition,
    CanvasRenderer
    ]);
    
  },
  async mounted(){
    //首先调用了 Promise.all 方法，将 this.fetchData() 方法包装成一个 Promise 对象。这是因为 fetchData 方法是异步的，需要等待数据返回后才能进行后续的操作，而 Promise.all 方法可以等待多个 Promise 对象都返回后再执行后续操作。使用 await 关键字等待该 Promise 对象的返回，确保在数据获取完成后再进行后续操作。
    await Promise.all([this.fetchData()]);
    this.charts1();
    this.charts2();
    this.charts3();
  },
  methods: {
    charts1() {
      Axios.get("http://localhost:8080/record/num")
      .then((res)=>{
        this.recordNum = res.data.data;
        console.log(this.recordNum);
      //初始化图表实例
      // document.getElementById('chart1') 获取了一个 ID 为 chart1 的 DOM 元素，然后将该元素传递给 echarts.init 方法，该方法将返回一个图表实例 myChart，该实例可以用于在页面中绘制各种类型的图表，例如折线图、柱状图、饼图等。
        var myChart = echarts.init(document.getElementById('chart1'));
        // 设置图表的基本配置
        let option = {
          title: {
            text: '报警管理',//主标题
            subtext: 'Alarm management',//副标题
            left: 'center'//位置
          },
          //提示框的配置，通过 trigger属性指定触发方式为 item，
          //表示鼠标悬浮在图表上时会显示该项数据的详细信息
          tooltip: {
            trigger: 'item'
          },
          //图例的配置，通过 orient属性指定图例的布局方向为垂直方向，通过 left 属性指定图例的位置为左侧
          legend: {
            orient: 'vertical',
            left: 'left'
          },
          // //图表的系列配置，这里只有一个饼图系列，通过 name 属性指定系列的名称为 Access From，
          // //通过 type 属性指定系列的类型为饼图，通过 radius 属性指定饼图的半径为 50%，
          // 通过 data 属性指定饼图的数据源，其中每个数据项都包括一个值和一个名称，表示该项数据的数值和名称，
          // 通过 emphasis 属性指定数据项在高亮（例如鼠标悬浮在该项上时）时的样式。
          series: [
            {
              name: 'Access From',
              type: 'pie',
              radius: '50%',
              data: [
                //value 属性表示该数据项对应的数值，即该数据项在总量中的占比大小
                { value: this.recordNum[0], name: '已处理报警数' },
                { value: this.recordNum[1], name: '未处理报警数' },
                { value: this.recordNum[2], name: '已忽略报警数' },
                { value: this.recordNum[3], name: '报警总数'}
              ],
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,//表示在高亮时阴影的模糊程度，数值越大，阴影越模糊。
                  shadowOffsetX: 0,//表示在高亮时阴影在 x 轴方向上的偏移量。
                  shadowColor: 'rgba(0, 0, 0, 0.5)'//表示在高亮时阴影的颜色，可以是一个颜色值或者一个 RGB、RGBA 值。
                }
              }
            }
          ]
        };
        // 将图表的配置应用到图表实例中，完成图表的绘制
        myChart.setOption(option);
      })      
    },
    charts2(){
      Axios.get("http://localhost:8080/record/api")
      .then((res)=>{
        this.dataNum = res.data.data;
        console.log(this.dataNum);
        var myChart = echarts.init(document.getElementById('chart2'));
        let option = {
          tooltip: {
            trigger: 'item'
          },
          legend: {
            // top: '5%',
            left: 'center'
          },
          series: [
            {
              name: 'Access From',
              type: 'pie',
              radius: ['40%', '70%'],//内半径为 40%，外半径为 70%
              avoidLabelOverlap: false,//avoidLabelOverlap 属性设置是否启用防止标签重叠优化，值为 false，表示不启用，即允许标签重叠。
              itemStyle: {
                borderRadius: 10,//设置饼图的圆角半径
                borderColor: '#fff',
                borderWidth: 2
              },
              label: {
                show: false,
                position: 'center'
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: 40,
                  fontWeight: 'bold'
                }
              },
              labelLine: {
                show: true
              },
              data: [
                { value: this.dataNum[0], name: '总设备数' },
                { value: this.dataNum[1], name: '当日上线数' },
                { value: this.dataNum[2], name: '当日下线数' }
              ]
            }
          ]
        };
        myChart.setOption(option);
      })      
    },
    charts3(){
      Axios.get("http://localhost:8080/record/api3")
      .then((res)=>{
        this.countList = res.data.data;

        var myChart = echarts.init(document.getElementById('chart3'));
        let option = {
          title: {
            text: '速度/数量'
          },
          tooltip: {
            trigger: 'axis'//，值为 'axis'，表示通过鼠标在坐标轴上移动触发提示框
          },
          legend: {
            data: ['每月在线量', '平均轴速','每月报警数']
          },
          //用于设置图表的网格，指定网格相对于容器边界的距离和是否包含坐标轴的标签等元素
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          //用于设置工具箱，包括保存图表为图片等功能。这里只设置了一个保存图表为图片的功能
          toolbox: {
            feature: {
              saveAsImage: {}
            }
          },
          //这里将 X 轴的类型设置为 category，表示 X 轴的数据为离散的类别名称；
          xAxis: {
            type: 'category',
            boundaryGap: false,//表示坐标轴两端的空白区域不会自动扩展
            data: this.countList.map(item =>{
              return Object.keys(item)[0];  // 将 data 属性设置为一个数组，用于指定 X 轴上的刻度值，
          // 这里使用了 this.countList 数组中的每个对象的第一个属性作为 X 轴的刻度值。
            })
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              name: '每月在线量',
              type: 'line',
              stack: 'Total',
              data: this.countList.map(item =>{
                return Object.values(item)[0];
              }),
              smooth: true
            },
            {
              name: '平均轴速',
              type: 'line',
              stack: 'Total',
              data: [2,4,5,6,7,10,6],
              smooth: true
            },
            {
              name: '每月报警数',
              type: 'line',
              stack: 'Total',
              data: this.countRecord.map(item =>{
                return Object.values(item)[0];
              }),
              smooth: true
            }
            
          ]
        };
        
        myChart.setOption(option);
      })      
    },
      async fetchData() {
      try {
      const res = await Axios.get("http://localhost:8080/record/api2");
      this.countRecord = res.data.data;
      } catch (error) {
      console.error(error);
      }
      }

    
    
  }
}
</script>

<style>
.contain{
  display: flex;
  justify-content: space-between; /* 水平方向平分 */
  align-items: center; /* 垂直方向居中 */
  height: 380px;
}
</style>
